<template>
  <div class="cart">
    <x-header style="background-color:#000;" :left-options="{backText: '关闭'}">
      购物车
    </x-header>
    <div class="cartLists" v-if="cartLists" v-for="(cartList,index) in cartLists">
      <div class="list">
        <input type="checkbox" class="checkbox" v-model="cartList.isChecked" v-on:change="change(index)">
        <img :src="cartList.img" alt="商品详情">
        <div class="des">
          <p>{{ cartList.title }}</p>
          <p class="text-orange">价格：{{ cartList.nowPrice }}</p>
          <p class="text-deep-grey">size: {{ cartList.size }}</p>
          <!-- <x-number name="数量" title="数量" v-model="num"></x-number> -->
          <div class="select-num">
            <span>数量</span>
            <span>
              <button @click="substract(index)">-</button>
              <input type="text" v-model="cartList.numbers" value="1">
              <button @click="add(index)">+</button>
            </span>
            <span @click="deleteCart(cartList.cid)" style="margin-left:3vw;color:blue;">删除</span>
          </div>
        </div>
      </div>
    </div>
    <span v-if="cartLists.length==0">购物车空空如也~</span>
    <cart-foot v-bind:totalPrice="totalPrice"></cart-foot>
  </div>
</template>
<script>
import {XHeader,XNumber} from 'vux'
import CartFoot from './CartFoot.vue'
import goodsApi from '../api/goods.js'
import cartApi from '../api/cart.js'
export default {
  components:{
    XHeader,
    XNumber,
    CartFoot
  },
  data(){
    return {
      src:"",
    }
  },
  computed: {
    cartLists() {
      return this.$store.state.details.cartList
      // let data = JSON.parse( sessionStorage.getItem( 'carList'));
      // return JSON.parse( sessionStorage.getItem( 'carList'))
    },
    totalPrice() {
      // return this.$store.state.details.totalPrice
      let prices = 0;
      console.log(this.cartLists.length)
      for(let i = 0; i < this.cartLists.length; i++) {
        if(this.cartLists[i].isChecked) {
          prices += this.cartLists[i].numbers * this.cartLists[i].nowPrice
        }
      }
      return prices;
    }
  },
  created(){
    // this.getImg()
  },
  methods: {
    substract(index) {
      this.$store.dispatch('substract',index)
    },
    add(index) {
      this.$store.dispatch('add',index)
    },
    change(index) {
        
    },
    getImg(){
      console.log(this.cartLists)
      goodsApi.goodsDetails((res)=>{
        this.src=res.data.pimg.split("#")[0];
      },(err)=>{},{},this.cartLists[0].id)
    },
    deleteCart(cid1) {
      // let test = JSON.stringify({cid:cid1})
      cartApi.deleteCartItem(res=>{
        console.log("删除成功")
      },err=>{},JSON.stringify(cid1))

      for(let i=0;i<this.cartLists.length;i++) {
        if(this.cartLists[i].cid === cid1) {
          this.$store.dispatch('deleteCart',i)
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .cart{
    .cartLists{
      padding: 1vw;
      .list{
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 2vw;
        .checkbox{
          width: 6vw;
          height: 6vw;
        }
        img{
          width: 30vw;
          height: 30vw;
        }
        .des{
          // display: flex;
          margin-left: 2vw;
          p{
            margin-bottom: 2vw;
          }
          .select-num{
            display: flex;
            align-items: center;
            justify-content: space-between;
            span{
              margin: 0;
              display: inline-block;
            }
            button{
              width: 7vw;
              height: 7vw;
              border: 0;
              background-color: #f60;
              color: #fff;
              float: left;
            }
            input{
              display: inline-block;
              width: 5vw;
              height: 7vw;
              border: 0;
              margin: 0;
              float: left;
              padding-left: 2vw;

            }
          }
          
        }
      }
    }
  }
</style>